<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="static/easyui/jquery.min.js"></script>
<script type="text/javascript" src="static/easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="static/easyui/locale/easyui-lang-zh_CN.js"></script>
<link rel="stylesheet" href="static/easyui/themes/icon.css">
<link rel="stylesheet" href="static/easyui/themes/metro-admin/easyui.css">


</head>
<body>
<style type="text/css">
#dg{
		width: 100%;
	    float: left;
	    overflow-x: auto;
	    margin-top: 5px;
	    border-collapse: collapse;
	    border: 1px solid #e4e7ec;
	    background-color: #fff;
   		color: gray;
   		font-size:12px; 
   		overflow:hidden;
	}
	#dg thead{
		color: #19AA8D;
	    font-size: 14px;
	    font-weight: 700;
	} 
	#dg th{
		background: #6666661a;
		text-align:center;
	}
	#dg td{
		border: 1px solid #e4e7ec;
		width: 150px;
		height: 50px;
		
	}
#role-add,#role-off,#role-on,.role-button,#grant-off,#grant-on,#fenpei-off,#fenpei-on{
	background:#17AA8D;
	border-radius:3px;
	color:white;
}
#role-off,#role-on,#grant-off,#grant-on,#fenpei-off,#fenpei-on{
float:left;
margin-right:10px;
}
.role-button{
	margin:0 4px;
	width:60px;
	height:25px;
	border:none;
	outline: none;
	cursor:pointer;
}
.staff_on{
	width:fit-content;
	padding:2px 12px;
	float:left;
	margin:5px 10px;
	background:beige;
	cursor:pointer;
}
.chadiao{
	cursor:pointer;
}
.people_staff{
	margin:5px 0;
	text-align:left;
	font-size:14px;
}
.you_people{
	 width:100%;
	height:50px;
	cursor:pointer;
}
.you_people:hover{
 background:#E2F2FF;
}
.position_pp{
margin-left:50px;
}
.you_people_list{
	width:300px;
	position:relative;
	border:solid 1px red;
	background:white;
	display:inline-block;
	top:30px;
    left:5px;
}
</style>


<div style="width:90%;height:100%;background:white;padding:20px;margin:20px auto;">
<a id="role-add" href="#" class="easyui-linkbutton" data-options="width:80,height:25">新增</a>
<table class="easyui-datagrid" id="dg" data-options="width:990,height:400"></table>
</div>

<script type="text/javascript">

//编辑
function bianji(a){
	 $.ajax({
			url:"select-position",
			type:"post",
			data:{"positionId":a},
			async:false,//是否异步
			success:function(data){
				$("#role-name").val(data[0]["position_name"]);
				$("#role-ms").val(data[0]["position_ms"]);
				$("#role-departname").val(data[0]["depart_name"]);
			}
	  });
    $("#positionId").val(a);
    $(".xinzeng_text").html("编辑");
	$("#zhezhao").show();
}
//授权
function authorization(b){
	$("#zhezhaotwo").show();
	 $('#qx_tree').tree({
		 checkbox:true,
		onlyLeafCheck:true,
	    url:'init-role-tree?positionId='+b
	}); 
	$("#positionIdtwo").val(b);
}

//分配
function fenpei(c){
	$("#yi_staff").children().remove();
	   $("#ke_staff").children().remove();
	$.ajax({
		url:"select-role-staff",
		post:"post",
		data:{"positionId":c},
		success:function(data){
			//显示该角色已分配的用户
			for(var i=0;i<data.length;i++){
				var dd=$("<div class='staff_on'>"+data[i]["Staff_name"]+"</div>");
				dd.append("<a class='chadiao yiuserid' abbr='"+data[i]["staff_id"]+"' onClick='chadiao(this)'>×</a>");
				$("#yi_staff").append(dd);
			}
		}
	});
	$.ajax({
		url:"selectall-role-staff",
		post:"post",
		success:function(data){
			//显示该角色已分配的用户
			for(var i=0;i<data.length;i++){
				var dd=$("<div class='staff_on ke_fen' abbr='"+data[i]["staff_id"]+"' onClick='dianyong(this)'>"+data[i]["Staff_name"]+"</div>");
				$("#ke_staff").append(dd);
			}
		}
	});
	$(".position_id3").val(c);
	$("#search_staff").val("");
	$("#zhezhaothree").show();
}

function dianyong(g){
	var kk=$(g).attr("abbr");
	var tt=$(g).text();
	var i=[];
	var j=false;
	$(".yiuserid").each(function(){
		i.push($(this).attr("abbr"));
	});
	for(var c=0;c<i.length;c++){
		if(kk==i[c]){
			j=true;
		}
	}
	if(!j){
		var dd=$("<div class='staff_on'>"+tt+"</div>");
		dd.append("<a class='chadiao yiuserid' abbr='"+kk+"' onClick='chadiao(this)'>×</a>");
		$("#yi_staff").append(dd);
	}
	
}

function chadiao(a){
	$(a).parent(".staff_on").remove();
}
$('#dg').datagrid({
    url:'ps',
    singleSelect:true,
    sortOrder:'desc',
    columns:[[
		{field:'position_id',title:'角色编号',width:165,align:'center'},
		{field:'depart_name',title:'部门名称',width:275,align:'center'},
		{field:'position_name',title:'角色名称',width:275,align:'center'},
		{field:'position_ms',title:'角色职责',width:275,align:'center'},
		{field:'cc',title:'操作',width:275,fixed:false,align:'center',
			formatter:function(value,row,index){
				return "<input type='button' class='role-button' value='编辑' onClick='bianji("+row.position_id+")'/>"+
				"<input type='button' class='role-button' value='授权' onClick='authorization("+row.position_id+")'/>"+
				"<input type='button' class='role-button' value='分配' onClick='fenpei("+row.position_id+")'/>";
			}
		}
    ]]
});

$("#role-departname").click(function(){
	$(".depart_list").show();
});
$(".depart_list").tree({
    url:'init-depart',
    	onClick: function(node){
    		    $(".depart_list").hide();
	    		$("#role-departname").val(node.text);
	    		$("#role-departname").attr({"abbr":node.id}); 
    		
    	} 
    	
});

</script>
<!-- 遮罩层1+新增+编辑 -->
<div id="zhezhao" style="width:1366px;height:736px;position:fixed; top:0px;
background: rgba(0, 0, 0, 0.5);text-align:center;left:0;z-index:10;display:none;" >

<div style="margin:20px auto;width:500px;height:180px;background:white;border-radius:3px;">
	<div style="width:100%;height:30px;">
		<span style="width:50px;height:30px;line-height:30px;display:inline-block;float:left;margin-left:20px;" class="xinzeng_text"></span>
		<button class="icon-close guanbiya" style="float:right;width:30px;height:30px;cursor:pointer;border:none;outline:none;"></button>
	</div>
	<div style="width:100%;height:115px;border-top:solid 1px #E5E5E5;border-bottom:solid 1px #E5E5E5;">
		<p>
		<input type="hidden" id="positionId">
			<span>职位名称：</span><input type="text" id="role-name"/>
		</p>
		
		<p>
			<span>职位职责：</span><input type="text" id="role-ms"/>
		</p>
		
		<p>
			<span>所属部门：</span><input type="text" id="role-departname"/>
			<ul class="depart_list" style="overflow:auto;display:none;width:190px;height:200px;background:white;margin-left:40%;padding:10px 10px;box-shadow: 2px 4px 6px 1px grey;
    border-radius: 2px;position:sticky;"></ul>
		</p>
	</div>
	<div style="width:100%;height:30px;">
		<div style="width:140px;float:right;margin-top:5px;">
			<a id="role-off" href="#" class="easyui-linkbutton" data-options="width:60,height:25">关闭</a>
			<a id="role-on" href="#" class="easyui-linkbutton" data-options="width:60,height:25">确定</a>
		</div>
	</div>
</div>

</div>
<script type="text/javascript">
//弹窗初始化
function chushihua(){
	$("#role-name").val("");
	$("#role-ms").val("");
	$("#role-departname").val("");
	$("#positionId").val(0);
	$(".xinzeng_text").html("新增");
}
$(function(){
	
	$("#zhezhao").hide();
	
	//点击新增按钮
   $("#role-add").click(function(){
	   chushihua();
	   $("#zhezhao").show();
   });
	
	//点击关闭按钮
   $(".guanbiya").click(function(){
	   $("#zhezhao").hide();
	   $("#zhezhaotwo").hide();
	   $("#zhezhaothree").hide();
	   /* $("#yi_staff").children().remove();
	   $("#ke_staff").children().remove(); */
	   $(".you_people_list").children().remove();
   }); 
	
	//点击取消按钮
   $("#role-off").click(function(){
	   $("#zhezhao").hide();
   });
   $("#grant-off").click(function(){
	   $("#zhezhaotwo").hide();
   });
   $("#fenpei-off").click(function(){
	   $("#zhezhaothree").hide();
	   $("#yi_staff").children().remove();
	   $("#ke_staff").children().remove();
	   $(".you_people_list").children().remove();
   });
	
	//点击确定按钮
   $("#role-on").click(function(){
	   var a=$("#role-name").val();
	   var b=$("#role-ms").val();
	   var c=$("#positionId").val();
	   var d=$("#role-departname").attr("abbr");
	  $.ajax({ 
			url:"save-position",
			type:"post",
			data:{"positionId":c,"positionName":a,"positionMs":b,"depart_id":d},
			async:false,//是否异步
			success:function(data){
				$('#dg').datagrid('reload'); 
			}
	  }); 
	   $("#zhezhao").hide();

   });
});
</script>

<!-- 遮罩层2+权限授权 -->
<div id="zhezhaotwo" style="width:1366px;height:736px;position:fixed; top:0px;
background: rgba(0, 0, 0, 0.5);text-align:center;left:0;z-index:10;display:none;" >
	<div style="margin:20px auto;width:300px;height:440px;background:white;border-radius:3px;">
	<div style="width:100%;height:30px;border-bottom:solid 1px #E5E5E5;">
		<span style="width:50px;height:30px;line-height:30px;display:inline-block;float:left;margin-left:20px;">授权</span>
		<button class="icon-close guanbiya" style="float:right;width:30px;height:30px;cursor:pointer;border:none;outline:none;"></button>
	</div>
	<input type="hidden" id="positionIdtwo"/>
		<ul id="qx_tree" style="margin:7px auto;padding-top:20px;width:200px;height:340px;overflow: overlay;"></ul>
		<div style="width:100%;border-top:solid 1px #E5E5E5;">
		<div style="width:140px;height:30px;float:right;margin-top:4px;">
			<a id="grant-off" class="easyui-linkbutton" data-options="width:60,height:25">取消</a>
			<a id="grant-on" class="easyui-linkbutton" data-options="width:60,height:25">保存</a>
		</div>
		</div>
	</div>
</div>

<script type="text/javascript">
	$(function(){
		$("#zhezhaotwo").hide();
	
		 
		//点击确定按钮
		   $("#grant-on").click(function(){
			   var positionIdTwo=$("#positionIdtwo").val();
			   var nodes = $('#qx_tree').tree('getChecked', ['checked','indeterminate']);
				var functionIds = [];
				//循环选中的节点
				for (var i = 0; i < nodes.length; i++) {
					//获取三级功能id，存入数组
					functionIds.push(nodes[i].id);
					//根据三级的节点，获取二级
					var parent = $("#qx_tree").tree("getParent",nodes[i].target);
					if(parent != null){
						functionIds.push(parent.id);
						//根据二级的节点，获取一级
						var root = $("#qx_tree").tree("getParent",parent.target);
						if(root != null){
							functionIds.push(root.id);
						}
					}
				}
				//去重
				function dedupe(array){
					 return Array.from(new Set(array));
				}
				functionIds = dedupe(functionIds) //保证一级和二级在数组中不重复
				console.log(JSON.stringify(functionIds));
				$.ajax({
					url:'save-role-tree',
					type:'post',
					data:{
						positionId:positionIdTwo,
						funIds:JSON.stringify(functionIds)
					}
				});
			   $("#zhezhaotwo").hide();
		   });
	})
</script>


<!-- 遮罩层3+角色分配 -->
<div id="zhezhaothree" style="width:1366px;height:736px;position:fixed; top:0px;
background: rgba(0, 0, 0, 0.5);text-align:center;left:0;z-index:10;display:none;">
	<div style="width:800px;height:500px;background:white;margin:20px auto;border-radius:3px;">
			<input type="hidden" class="position_id3"/>
			<div style="width:100%;height:30px;border-bottom:solid 1px #E5E5E5;">
				<span style="width:50px;height:30px;line-height:30px;display:inline-block;float:left;margin-left:20px;">分配</span>
				<button class="icon-close guanbiya" style="float:right;width:30px;height:30px;cursor:pointer;border:none;outline:none;"></button>
			</div>
			<p style="width:95%;height:20px;font-size:13px;margin:4px auto;text-align:left;">可分配用户</p>
			<div id="ke_staff" style="width:95%;height:150px;margin:auto;border:solid 1px #E0E0E0;border-radius:3px;"></div>
			
			<div style="width:95%;height:35px;margin:10px auto;background:#F2F2F2;">
				<div class="sea_ss" style="float:right;">
				
				<input id="search_staff" oninput="OnInput (event)" style="width:300px;height:20px;margin:5px;position:absolute;"/>
				<div class="you_people_list"></div>
				</div>
			</div>
			
			<p style="width:95%;height:20px;font-size:13px;margin:4px auto;text-align:left;">已分配用户</p>
			<div id="yi_staff" style="width:95%;height:160px;margin:auto;border:solid 1px #E0E0E0;border-radius:3px;"></div>
			
			<div style="width:100%;border-top:solid 1px #E5E5E5;margin:8px auto;">
				<div style="width:140px;height:30px;float:right;margin-top:4px;">
					<a id="fenpei-off" class="easyui-linkbutton" data-options="width:60,height:25">取消</a>
					<a id="fenpei-on" class="easyui-linkbutton" data-options="width:60,height:25">保存</a>
				</div>
			</div>
	</div>
</div>
<script type="text/javascript">
function OnInput (event) {
	//清空查询内容
	$(".you_people_list").children().remove();
    var a=event.target.value;
    $.ajax({
		url:"select-if",
		type:"post",
		data:{"staffname":a},
		success:function(data){
			if(data.length>0){
				for(var i=0;i<data.length;i++){
					var x=$("<span>部门：</span>");
					var y=$("<span class='position_pp'>职位：</span>");
					var z=$("<div class='you_people' abbs='"+data[i]["staff_id"]+"' abbr='"+data[i]["Staff_name"]+"' onClick='fengei(this)'></div>"); 
					
					var q=$("<div class='people_staff'></div>").append("<span>"+data[i]["Staff_name"]+"</span>");
					var w=$("<div class='people_staff'></div>")
					if(data[i]["depart_name"]!=null){
						w.append(x).append("<span>"+data[i]["depart_name"]+"</span>");	
					}
					if(data[i]["position_name"]!=null){
						w.append(y).append("<span>"+data[i]["position_name"]+"</span>");	
					}
					z.append(q);
					z.append(w);	
					$(".you_people_list").append(z);
				}
		}else{
			$(".you_people_list").children().remove();
		}
			
		}
	});
}
//添加用户
function fengei(e){
	var a=$(e).attr("abbs");
	var b=$(e).attr("abbr");
	
	
	 			
	 			var dd=$("<div class='staff_on'>"+b+"</div>");
	 			dd.append("<a class='chadiao userid' abbr='"+a+"' onClick='chadiao(this)'>×</a>");
	 			$("#ke_staff").append(dd);
	 		
	
}

$(function(){
	$("#fenpei-on").click(function(){
		var i=[];//获取添加的用户id
		var j=[];//获取已添加的用户
		var k=$(".position_id3").val();
		$(".userid").each(function(){
			i.push(Number($(this).attr("abbr")));
			
		});
		$(".yiuserid").each(function(){
			j.push(Number($(this).attr("abbr")));
		});
		//编辑已添加用户
	 	$.ajax({
			url:"update-role-staff",
			type:"post",
			data:{"positionId":k,"staff":JSON.stringify(j)},
			async:false//是否异步
		}); 
		/* //添加用户
		$.ajax({
			url:"save-role-staff",
			type:"post",
			data:{"positionId":k,"staff":JSON.stringify(i)},
			async:false//是否异步
		}); */
		$("#zhezhaothree").hide();
	});
})
	
</script>
</body>
</html>